<template>
    <div class="mr-root">
        <public-header>

        </public-header>
        <el-carousel :interval="1500" height="200px">
            <el-carousel-item v-for="i in list">
                <p class="title">{{i.title}}</p>
                <img :src=i.images id="im" alt="">
               
            </el-carousel-item>
        </el-carousel>
        <div class="d">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>最近更新 <span>News</span></h2>
              <router-link to="/comic/more">
                <a href="/" class="more">更多</a>
            </router-link>
        </div>
        <!--最近更新-->
        <div class="div1" v-for="r in xiao">
          
             <div id="li">
               <router-link :to="'/comic/Content/'+r.id+'/'+r.name"> 
                    <div class="img">
                        <img :src=r.images alt="">
                    </div>

                    <div class="geng">
                        <span>{{r.updateInfo}}</span>

                    </div>
                    <div class="name">
                        <span>{{r.name}}</span>
                    </div>
                    <div class="ming">
                        <i class="fa fa-user-o"></i>
                        <span>{{r.author}}</span>
                    </div>
                    <div class="liu">
                        <span>{{r.categoryLabel}}</span>
                    </div>
                </router-link>
            </div>
            
        </div>
        <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>耽美</h2> 
            <router-link to="/comic/Two">
                 <a href="/" id="xiaoer">更多</a>
            </router-link>
           
        </div>
        <!--耽美-->
        <div class="div1" v-for="e in wo">
            <div id="li">
                 <router-link :to="'/comic/Content/'+e.id+'/'+e.name"> 
                <div class="img">
                    <img :src=e.images alt="">
                </div>
                <div class="geng">
                    <span>{{e.updateInfo}}</span>

                </div>
                <div class="name">
                    <span>{{e.name}}</span>
                </div>
                <div class="ming">
                    <i class="fa fa-user-o"></i>
                    <span>{{e.author}}</span>
                </div>
                <div class="liu">
                    <span>{{e.categoryLabel}}</span>
                </div>
                 </router-link>
            </div>
        </div>
        <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>恋爱</h2> 
            <router-link to="/comic/Three">
            <a href="/" id="duo">更多</a></router-link>
        </div>
        <!--恋爱-->
        <ul class="div1" v-for="q in men">
            <li id="li">
                 <router-link :to="'/comic/Content/'+q.id+'/'+q.name"> 
                <div class="img">
                    <img :src=q.images alt="">
                </div>
                <div class="geng">
                    <span>{{q.updateInfo}}</span>

                </div>
                <div class="name">
                    <span>{{q.name}}</span>
                </div>
                <div class="ming">
                    <i class="fa fa-user-o"></i>
                    <span>{{q.author}}</span>
                </div>
                <div class="liu">
                    <span>{{q.categoryLabel}}</span>
                </div>
                 </router-link>
            </li>
        </ul>
        <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>古风</h2>
            <router-link to="/comic/Four">
             <a href="/" id="a">更多</a></router-link>
        </div>
        <!--古风-->
        <ul class="div1" v-for="b in shi">
            <li id="li">
                 <router-link :to="'/comic/Content/'+b.id+'/'+b.name"> 
                <div class="img">
                    <img :src=b.images alt="">
                </div>
                <div class="geng">
                    <span>{{b.updateInfo}}</span>

                </div>
                <div class="name">
                    <span>{{b.name}}</span>
                </div>
                <div class="ming">
                    <i class="fa fa-user-o"></i>
                    <span>{{b.author}}</span>
                </div>
                <div class="liu">
                    <span>{{b.categoryLabel}}</span>
                </div>
                 </router-link>
            </li>
        </ul>
        <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>校园</h2>
            <router-link to="/comic/Five"> 
            <a href="/" id="b">更多</a></router-link>
        </div>
        <!--校园-->
        <ul class="div1" v-for="c in ni">
            <li id="li">
                 <router-link :to="'/comic/Content/'+c.id+'/'+c.name"> 
                <div class="img">
                    <img :src=c.images alt="">
                </div>
                <div class="geng">
                    <span>{{c.updateInfo}}</span>

                </div>
                <div class="name">
                    <span>{{c.name}}</span>
                </div>
                <div class="ming">
                    <i class="fa fa-user-o"></i>
                    <span>{{c.author}}</span>
                </div>
                <div class="liu">
                    <span>{{c.categoryLabel}}</span>
                </div>
                 </router-link>
            </li>
        </ul>
        <div class="jiazai">
            <div class="ong">
                <a href="/">
                    <img src="../assets/img/1.png" alt="">
                </a>
                <a href="/">
                    <img src="../assets/img/2.png" alt="">
                </a>
            </div>
            <div class="one2">
                <a href="/">
                    <img src="../assets/img/3.png" alt="">
                </a>
                <a href="/">
                    <img src="../assets/img/4.png" alt="">
                </a>
            </div>

        </div>
        <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>最近资讯 <span id="gray">Information</span></h2> 
            <router-link to="News">
            <a href="/" id="c">更多</a></router-link>
        </div>
        <div>
            <!--最新资讯-->
            <div v-for="t in jia">
                <div class="fu">
                    <router-link :to="'/news/Informationdetails/'+t.id+'/'+t.title">
                    <div class="imgs">
                        <img :src=t.images alt="">
                    </div>
                     </router-link>
                    <div class="content2">
                        <p>{{t.title}}</p>
                        <p>{{t.createTime}}</p>

                        <p>标签:{{t.label}}</p>
                    </div>
                   
                </div>
            </div>
        </div>
        <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>美图 <span id="gray">Picture</span></h2>
            <router-link to="Image">
             <a href="/" id="d">更多</a></router-link>
        </div>
        <!--美图-->
        <div v-for="n in er">
            <ul class="fuimg">
                <router-link :to="'/Mitodetails/'+n.id+'/'+n.label">
                <li class="img3">
                    <img :src=n.images alt="">
                    <h3>动漫图片{{n.label}}漫画壁纸美图下载</h3>
                    <div class="fu2">
                        <img :src=n.userIDInfo.images id="san" alt="">
                        <span id="si">{{n.userIDInfo.name}}</span>
                    </div>
                </li>
                </router-link>
            </ul>

        </div>
        <div class="kong"></div>
        <hfooter></hfooter>
        <back-top></back-top>
        <loading v-if="showload"></loading>
    </div>


</template>
<script>
    import PublicHeader from '../components/Header'
    import loading from '../components/Loding'
    import Hfooter from '../components/Footer'
    import BackTop from '../components/BackTop'
    export default {
        data() {
            return {
                list: [],
                xiao: [],
                showload: true,
                wo: [],
                men: [],
                shi: [],
                ni: [],
                jia: [],
                er: []

            }
        },
        components: {
            PublicHeader, loading, Hfooter, BackTop
        },
        //   轮播图
        created() {
            this.axios.get(`https://api.maimengjun.com/index.php?r=adImage/list&customPosition=3`)
                .then(data => {
                    // console.log(data)
                    this.list = data.data.results
                    // console.log(this.list)
                    this.showload = false
                })
                .catch(err => {
                    console.log(err)
                })
            //  最近更新
            this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=20&page=1&size=6`)
                .then(data => {
                   
                    this.xiao = data.data.results
                    // console.log(this.xiao)

                })
                .catch(err => {
                    console.log(err)
                })
            //  耽美
            this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=14&page=1&size=3`)
                .then(data => {
                    this.wo = data.data.results
                    // console.log(this.wo)
                })
                .catch(err => {
                    console.log(err)
                })
            //    恋爱
            this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonBillBoard/getCartoonSetListByBillBoard&id=11&page=1&size=3`)
                .then(data => {
                    this.men = data.data.results
                    // console.log(this.men)
                })
                .catch(err => {
                    console.log(err)
                })
            //    古风
            this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonSet/list&page=1&size=3&search_categorys=26`)
                .then(data => {
                    this.shi = data.data.results
                    // console.log(this.shi)
                })
                .catch(err => {
                    console.log(err)
                })
            //    校园
            this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonBillBoard/getCartoonSetListByBillBoard&id=11&page=3&size=3`)
                .then(data => {
                    this.ni = data.data.results
                    // console.log(this.ni)
                })
                .catch(err => {
                    console.log(err)
                })
            // 最新资讯
            this.axios.get(`https://api.maimengjun.com/index.php?r=message/list&page=1&size=4&search_title=`)
                .then(data => {
                    this.jia = data.data.results
                    // console.log(this.jia)
                })
                .catch(err => {
                    console.log(err)
                })
            // 美图
            this.axios.get(`https://api.maimengjun.com/index.php?r=prettyImages/list&page=1&size=4&searchLabel=`)
                .then(data => {
                    this.er = data.data.results
                    // console.log(this.er)
                })
                .catch(err => {
                    console.log(err)
                })
        }
    }

</script>

<style scoped>
a#xiaoer{
    position: absolute;
    right: 0.2rem;
    top: 21.6rem;
}
    .kong {
        height: 13rem;
        width: 100%;
    }
    
    #si {
        display: inline-block;
        width:3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    #san {
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 50%;
    }
    
    .img3>img {
        width: 4rem;
        height: 4rem;
    }
    
    .img3 {
        margin-left: 0.5rem;
        width: 4.4rem;
    }
    
    .img3>h3 {
        font-size: 0.35rem;
    }
    
    .img3 {
        float: left;
    }
    
    a#d {
        position: absolute;
        right: 0.2rem;
        top: 71.6rem;
    }
    
    .fu {
        display: flex;
    }
    
    .fu .content2 {
        margin-left: 0.3rem;
    }
    
    .fu .content2>p:nth-child(1) {
        font-weight: bolder;
        font-size: 0.45rem;
        -webkit-line-clamp:2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: hidden;
        width:6rem;
    }
    
    .fu .content2>p:nth-child(2),
    p:nth-child(3) {
        color: gray;
        font-size: 0.3rem;
    }
    
    .imgs img {
        width: 3.5rem;
        height: 2.5rem;
        margin-bottom: 0.1rem;
        margin-left: 0.3rem;
    }
    
    span#gray {
        color: #ccc;
    }
    
    a#c {
        position: absolute;
        right: 0.2rem;
        top: 59rem;
    }
    
    .jiazai {
        display: flex;
        margin-top: 6.7rem;
    }
    
    .jiazai img {
        width: 4.3rem;
        height: 1.5rem;
        margin-left: 0.4rem;
        margin-bottom: 8px;
    }
    
    .jiazai div {
        flex-basis: 45%;
    }
    
    a {
        color: gray;
    }
    
    a#b {
        position: absolute;
        top: 47rem;
        right: 10px;
    }
    
    a#a {
        position: absolute;
        top: 38.3rem;
        right:10px;
    }
    
    a#duo {
        position: absolute;
        top: 29.8rem;
        right: 10px;
    }
    
    .biao>h2 {
        margin-left: 30px;
        position: relative;
        left: 0.9rem;
        top: -0.7rem;
    }
    .biao a{
        width: 0.8rem;
        border: solid 1px #ccc;
        border-radius: 5px;
        text-align: center;
        line-height: 0.5rem;
    }
    
    .liu span {
        margin-left: 25px;
        background: #ff4f65;
        color: white;
        display: inline-block;
        width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        line-height: 25px;
          border-radius: 10px 0 10px 0;
        position: relative;
        top: -0.7rem;
        font-size: 0.3rem;
    }
    
    .name {
        width: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 22px;
        font-weight: bolder;
        position: relative;
        top: -0.7rem;
    }
    
    .ming {
        font-size: 15px;
        color: #ccc;
        margin-left: 25px;
        width: 2rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
        top: -0.7rem;
    }
    
    .div1{
        width: 500px;
    }
    
    .div1>#li {
        float: left;
    }
    
    .img img {
        width: 110px;
        height: 160px;
        margin-left: 20px;
    }
    
    .el-carousel {
        margin-top: 67px;
    }
    
    #im {
        height: 200px;
    }
    
    .title {
        color: white;
        position: relative;
        top: 170px;
    }
    
    .d {
        margin-top: 40px;
    }
    
    .im {
        width: 30px;
        height: 30px;
        margin-left: 30px;
    }
    
    .d h2 {
        position: relative;
        top: -30px;
        left: 70px;
    }
    
    .d h2>span {
        color: gray;
        margin-left: 10px;
    }
    
    a.more {
        position: absolute;
        right: 20px;
        width: 40px;
        border-radius: 5px;
        text-align: center;
        top: 317px;
        border: solid 1px #ccc;
    }
    
    .geng>span {
        font-size: 13px;
        margin-left: 20px;
        display: inline-block;
        width: 110px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        background: rgba(0, 0, 0, .5);
        color: white;
        position: relative;
        top: -0.9rem;
    }
</style>